Js代码规范

大音希声

面向对象,命令式
函数式、声明式

[JavaScript代码风格要素]

一个function只做一件事,让function成为代码组合的最小单元。

删除不必要的代码。

使用主动语态。

避免一连串结构松散的,不知所云的代码。

将相关的代码写在一起。

利用判断true值的方式来编写代码。

不同的技术方案利用不同的代码组织结构来实现。

代码应该简单,而不是简单化。

[如何优雅的编写 JavaScript 代码]

避免使用 js 糟粕和鸡肋
编写简洁的 JavaScript 代码
使用 ES6/ES7 新特性

[如何让 JS 写得更漂亮]

01 按强类型风格写代码
02 减少作用域查找
03 避免==的使用
04 合并表达式
05 减少魔数
06 使用ES6简化代码

[编写现代 JavaScript 代码]

使用可格式化代码的 linter
为你的 linter 定制现代化的规则
使用 ES2015+ 的新特性
使用函数式编程
其他的一些建议

[远离面条代码:编写可维护的 JS 代码]

1、分析项目
不考虑你是开发者,把自己当成一个用户去审视项目
浏览代码看一下用了哪些工具
阅读工具的文档和最佳实践
通过单元测试,从更高的角度上了解项目

2、建立规范
使用 .editorconfig 来保证不同编辑器之间的代码规范
确定好缩进方式。tab或空格都无所谓
保证命名规范
如果还没使用,那么推荐使用格式工具,例如 ESLint , JSLint,或 JSHint 等
更新依赖,但是要理性的慢慢升级

3、整理
使用 Karma、Jasmine 或 Nightwatch.js 来建立单元测试或浏览器自动化测试
保证架构和设计模式一致性
不要混用 design patterns,尽可能结合已有的设计模式
决定你是否想将项目分离成模块。每个模块只做明确的一个功能的并且和外面的代码解耦
如果不想做模块化,专注于分离成多个可测试的小型代码块
为你的代码建立文档和合适的命名方式
使用 JSDoc 来自动生成注释
提交每一个代码变更。如果出错方便回滚

4、不要疯掉
不要抱怨前面的程序员。负面情绪不能帮你重构,只会浪费你的时间
每行代码都有它存在的原因。记住我们写的代码也是

[翻译:谷歌HTML、CSS和JavaScript风格规范]

翻译:谷歌HTML、CSS和JavaScript风格规范(zhang)

html

HTML样式规范并没有多少惊喜。

语义HTML5作为text/html
分离的标记、样式和脚本
在可能情况下验证你的标记
技术不支持的时候使用备胎,如canvas
谷歌推荐打理每一个字节:使用UTF-8编码,剔除尾部的空白,避免实体引用,如—及” 甚至推荐忽略可选结构以及结束标签,如:

1
2
3
<!DOCTYPE html>
<title>节约字节数 = 节约钞票数</title>
<p>如题。

作者吐槽:这……我虽然赞同要省字节,但是还是倾向于严格的XHTML解析。
译者吐槽:一字不差同上。

奇怪的是,谷歌建议使用连续的两个小空格代替tab空格。这不是两倍的字节大小吗?

CSS

样式规范主要就是更进一步的最佳实践以及字节节约技术:

使用有效的CSS, 除非是bugs处理或专属语法(浏览器私有前缀)
使用短ID或类命名,但确保他们不要太过隐晦,或直白(如#blue-button)
大型项目使用前缀,如#xyz-help, .xyz-column
选择器尽可能简单,如#example,而不是ul#example
使用缩写
url()中不使用引号,0后面不跟单位
使用#ABC这种简写的16进制颜色表示,而不是#AABBCC
每个声明最后都要有分号(即使是最后一个)
避免浏览器hacks
谷歌建议尺寸前面的数值0省掉,如.5em, 可以节约一个字符.

规范还推荐每个声明占据一行。
然后,声明的书写按照首字母顺序排列,如下:

作者吐槽:对于属性的排序我还是喜欢根据其相关性,如块类型/尺寸,字体,文字对齐,填充,边距,颜色,背景,边框及其他属性。虽然,可以会让其他开发人员困惑,但是我自己用了好多年了!
译者吐槽:一字不差同上。

javascript

JavaScript的风格规范比较长,这可以理解,不过我们可以提炼出一些基本点:

总是使用var声明变量
行末别忘了分号
使用标准而不是不标准的功能
使用驼峰命名(如:camelCaseNames)以及大写的常量(如:UPPERCASE),避免使用const关键字,因为IE不支持
使用命名空间技术
避免eval()除非反序列化(奇怪的是JSON解析并未提及)
避免对象上使用with(), 数组使用for in
使用对象以及数组字面量而不是更冗长的声明
要知道truthy和falsy规则
JavaScript资源中不使用IE条件注释
不修改内置对象的原型——这会让人颜面扫地,因为这是让JavaScript更加强大的功能之一,但你知道这会导致问题
小心使用闭包以及不要循环引用
同样,小心使用”this”
这里有个不太寻常的推荐,不在块域中使用function, 如:

if (x) {
var foo = function() {}
}
而不是:

if (x) {
function foo() {}
}

显然,第二种语法到处都有使用。其可以正常运作,但是在ECMAScript中是无效的。

文档还提到,包装对象应该永远不要用在基元上,除非是类型转换。其会导致意想不到的结果,例如:

var x = new Boolean(false);
if (x) {
    // 代码执行
}

愚蠢的JavaScript.

最后,规范说你应该优先使用单引号(‘)于双引号(“),因为字符串可能包含HTML代码。

作者吐槽:我使用双引号到处沾花惹草,我不确定我能简单地改变这个习惯。但,我在PHP中对静态字符串又使用单引号。可能是我挑剔吧~~
译者吐槽:一字不差同上。

文档最好的建议是:保持一致。开发人员很少会赞同每个程序的规范要按照你自己的那套规则走。保持一致可以让6个月之后别人可以更容易地理解你的代码,可以让生活更加美好!

其它:
Google JavaScript 编码规范指南
Airbnb JavaScript 编码规范
Javascript编程风格(ruan)
编码规范: html/css/less/JavaScript/ecmascript/e-json/模块和加载器

knowledge is no pay,reward is kindness
0%